<template>
    <div class="app-container">
    <div>
        部门列表
    </div>

      <el-tabs v-model="type">
        <el-tab-pane label="类型科目" name="first">
            <div style="display: flex;">
                <div>
                    <span>人员类型</span>
                    <el-select v-model="activeName" placeholder="请选择" @change="handleClick" style="padding: 20px;">
                        <el-option
                        v-for="item in ifmPost" 
                        :key="item.postId"
                        :label="item.postName"
                        :value="item.postId">
                        </el-option>
                    </el-select>
                </div>
            </div>
        
            <el-table v-loading="loading" :data="dataList">
                <el-table-column prop="userId" label="编号" width="180"></el-table-column>
                <el-table-column prop="name" label="姓名" width="180"></el-table-column>
                <el-table-column prop="category" label="类型" width="180"></el-table-column>
                <el-table-column prop="subject" label="科目" width="180"></el-table-column>
                
                <el-table-column prop="january" label="一月" ></el-table-column>
                <el-table-column prop="february" label="二月" ></el-table-column>
                <el-table-column prop="march" label="三月" ></el-table-column>
                <el-table-column prop="april" label="四月" ></el-table-column>
                <el-table-column prop="may" label="五月" ></el-table-column>
                <el-table-column prop="june" label="六月" ></el-table-column>
                <el-table-column prop="july" label="七月" ></el-table-column>
                <el-table-column prop="august" label="八月" ></el-table-column>
                <el-table-column prop="september" label="九月"></el-table-column>
                <el-table-column prop="october" label="十月" ></el-table-column>
                <el-table-column prop="november" label="十一月" ></el-table-column>
                <el-table-column prop="december" label="十二月"></el-table-column>
            </el-table>
        </el-tab-pane>

        <el-tab-pane label="配置管理" name="second">
            <el-button type="primary" @click="addFree">新增</el-button>
            <div style="display: flex;">
                <div>
                    <span>人员类型</span>
                    <el-select v-model="typeName" placeholder="请选择" @change="typeChange" style="padding: 20px;">
                        <el-option
                        v-for="item in ifmPost" 
                        :key="item.postId"
                        :label="item.postName"
                        :value="item.postId">
                        </el-option>
                    </el-select>
                </div>
            </div>

            <div>
                <el-table v-loading="loading" :data="typeList">
                    <el-table-column prop="postName" label="人员类型"></el-table-column>
                    <el-table-column prop="programName" label="科目"></el-table-column>
                    <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
                        <template slot-scope="scope">
                        <el-button
                            size="mini"
                            type="text"
                            icon="el-icon-edit"
                            @click="handleUpdate(scope.row)"
                            v-hasPermi="['qualification:qualification:edit']"
                        >修改</el-button>
                        <el-button
                            size="mini"
                            type="text"
                            icon="el-icon-delete"
                            @click="handleDelete(scope.row)"
                            v-hasPermi="['qualification:qualification:remove']"
                        >删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </el-tab-pane>

        <!-- 修改及新增共用弹出层 -->
         <el-dialog :title="title" :visible.sync="open" width="30%" top="5vh" append-to-body class="scrollbar">
            <el-form ref="form" :model="form" :rules="rules" label-width="80px">
                <el-form-item label="人员类别" prop="postName">
                    <el-select v-model="form.postName" placeholder="请选择">
                        <el-option
                            v-for="item in ifmPost" 
                            :key="item.postId"
                            :label="item.postName"
                            :value="item.postName">
                        </el-option>
                    </el-select>
                    <!-- <el-input v-model="form.postName" placeholder="请输入" /> -->
                </el-form-item>
                <el-form-item label="科目" prop="programName">
                    <!-- freeList -->
                    <el-select v-model="form.programName" placeholder="请选择">
                        <el-option
                            v-for="item in freeList" 
                            :key="item.id"
                            :label="item.programName"
                            :value="item.programName">
                        </el-option>
                    </el-select>
                    <!-- <el-input v-model="form.programName" placeholder="请输入" /> -->
                </el-form-item>
                
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="submitForm">确 定</el-button>
                <el-button @click="open = false">取 消</el-button>
            </div>
          </el-dialog>
      </el-tabs>
    </div>
  </template>
  
  <script>
  import { getList,getIfmPost,getIfmPostAndKe,getFrees,addIfmPost,updateIfmPost,delFree 
    
  } from "@/api/prod/prod";

  export default {
    name: "Punishments",
    data() {
      return {
        dataList:[],
        activeName:1,
        ifmPost:[],
        typeList:[],
        type:"first",
        typeName:1,
        open:false,
        form:{
            id:null,
            postName:null,
            programName:null
        },
        freeList:[],
        title:"",
      };
    },
    created() {
      this.getList();
      this.getIfmPostList()
      this.getIfmPostAndKe()
      this.getFrees()
    },
    methods: {
        addFree(){
            for (let key in this.form) {
                if (this.form.hasOwnProperty(key)) {
                    this.$set(this.form, key, '');
                }
            }
            this.open = true
        },
        /** 提交按钮 */
        submitForm() {
            console.log("提交",this.form);
            if (this.form.id != "") {
                console.log("修改",this.form);
                updateIfmPost(this.form).then(response => {
                this.$modal.msgSuccess("修改成功");
                this.open = false;
                this.getIfmPostAndKe();
                });
            } else {
                console.log("新增",this.form);
                addIfmPost(this.form).then(response => {
                this.$modal.msgSuccess("新增成功");
                this.open = false;
                this.getIfmPostAndKe();
                });
            }
        },
        getFrees(){
            getFrees().then(res => {
                console.log("课程列表：",res.data);
                this.freeList = res.data;
            })
        },
        // 删除
        handleDelete(row){
            console.log("删除",row);
            delFree(row.id).then(res => {
                this.$modal.msgSuccess("删除成功");
                this.getIfmPostAndKe();
            })
            // this.open = true;
        },
        // 修改
        handleUpdate(row){
            console.log("修改",row);
            this.form = row;
            this.open = true;
        },
        // 查询数据
        getList(){
            getList(this.activeName).then(response => {
                console.log("数据：", response.data);
                this.dataList = response.data;
            })
        },
        handleClick(){
            console.log(this.activeName);
            this.getList();
        },
        getIfmPostList(){
            getIfmPost().then(response => {
                console.log("岗位数据：", response.data);
                this.ifmPost = response.data;
                
            })
        },
        getIfmPostAndKe(){
            getIfmPostAndKe(this.typeName).then(response => {
                console.log("岗位科目：", response.data);
                this.typeList = response.data;
            })
        },
        typeChange(){
            getIfmPostAndKe(this.typeName).then(response => {
                console.log("岗位科目：", response.data);
                this.typeList = response.data;
            })
        }
    }
  };
  </script>
  